<template>
	<view class="body">
		<view class="adsCon">
			<view class="list">
				<view>手机号</view>
				<input type="text" placeholder="请输入手机号" v-model="info.phone" maxlength="11">
			</view>
			<view class="list">
				<view>验证码</view>
				<input type="text" placeholder="请输入验证码" v-model="info.verifycode">
				<button class="yzm_btn" :disabled="codeDisabled" @click="getCode">{{ codeMsg }}</button>
			</view>
			<view class="list">
				<view>设置新支付密码</view>
				<input type="password" placeholder="请设置6位纯数字支付密码" v-model="info.paypass" password maxlength="6">
			</view>
			<view class="list">
				<view>确认新支付密码</view>
				<input type="password" placeholder="请确认6位纯数字支付密码" v-model="info.repaypass" password maxlength="6">
			</view>
		</view>
		<view class="subBtn"><view @click="submit">提交</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					// type:2
				},
				pwd_again:'',
				code:"",
				codeMsg: '获取验证码',
				countdown: 60,
				codeDisabled: false,
				timer: null,
			}
		},
		onLoad() {
			
		},
		methods: {
			back() {
				uni.navigateBack({
					
				})
			},
			getCode() {
				if (!this.info.phone) {
					return this.$msg('请输入手机号码');
				}
				this.$api.setCode({ phone: this.info.phone}).then(res => {
					if(res.ok){
						this.$msg(res.data, 2000);
						this.codeDisabled = true;
						if (!this.timer) {
						 	this.timer = setInterval(() => {
						 		if (this.countdown > 0 && this.countdown <= 60) {
									this.countdown--;
						 			if (this.countdown !== 0) {
						 				this.codeDisabled = true;
						 				this.codeMsg = '重新发送(' + this.countdown + ')';
						 			} else {
						 				clearInterval(this.timer);
						 				this.codeMsg = '获取验证码';
						 				this.countdown = 60;
						 				this.timer = null;
						 				this.codeDisabled = false;
						 			}
						 		}
						 	}, 1000);
						 }
					}else{
						this.$msg(res.msg);
						this.codeDisabled = false;
					}
				})
			},
			submit(){
				if(!this.info.phone){
					return this.$msg("请输入手机号码");
				}
				if(!this.info.verifycode){
					return this.$msg("请输入手机验证码");
				}
				if(!this.info.paypass){
					return this.$msg("请输入新支付密码");
				}
				if(this.info.paypass != this.info.repaypass){
					return this.$msg("两次支付密码输入不一致");
				}
				this.$api.resetPwd(this.info).then(res => {
					if(res.ok){
						this.$msg(res.msg);
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						}, 800)
					}else{
						this.$msg(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.code-btn {
		background: none!important;
		font-size: 30rpx;
		color: $zhuse!important;
		// border-left: 1rpx solid #d0b17b;
		border-radius: 0;
		height: 42rpx;
		width: 190rpx;
		padding: 0;
	}
	page,.body{
		background: #f3f3f3;
		width: 100%;
		height: 100vh;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.adsCon{
		width: 100%;
		margin-top: 20upx;
		.list{
			font-size: 28upx;
			color: #333;
			padding: 0 30upx;
			height: 102upx;
			background: #fff;
			border-bottom: 2upx solid #f3f3f3;
			display: flex;
			align-items: center;
			view{
				min-width: 170upx;
				margin-right: 30rpx;
			}
			input{
				height: 100%;
				flex: 1;
				font-family: '微软雅黑';
				font-size: 28upx;
				color: #333;
			}
			navigator,text{
				color: $zhuse;
			}
		}
	}
	.subBtn{
		padding: 0 20upx;
		margin-top: 80upx;
		view{
			width: 100%;
			height: 90upx;
			font-size: 32upx;
			color: #fff;
			background: $zhuse;
			border-radius: 60upx;
			text-align: center;
			line-height: 90upx;
		}
	}
</style>
